<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			background: #000 url() 0 0 no-repeat;
		}
		.box{
			width: 400px;
			height: 400px;
			border-radius: 50%;
			background: #fff url() 0 0 no-repeat;
			position: relative;
		}
		.father{
			width: 400px;
			height: 20px;
			/*background: #000 url() 0 0 no-repeat;*/
			position: absolute;
			top: 190px;
			left: 0px;
			transform:rotate(-90deg);
			-ms-transform:rotate(-90deg); /* Internet Explorer */
			-moz-transform:rotate(-90deg); /* Firefox */
			-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
			-o-transform:rotate(-90deg); /* Opera */

		}

		.father div{
			width: 200px;
			height: 20px;
			float: left;
		}
		.father div.son2{
			background: #000 url() 0 0 no-repeat;
		}
	</style>
	<script type="text/javascript">
		window.onload = function  () {
			var father = document.getElementById('father');

			var jiaodu = -90;

			function run () {
				father.style.transform = "rotate("+jiaodu+"deg)";
				father.style.MozTransform = "rotate("+jiaodu+"deg)";
				father.style.webkitTransform = "rotate("+jiaodu+"deg)";
				father.style.OTransform = "rotate("+jiaodu+"deg)";

				jiaodu +=10;

				if(jiaodu==270){
					jiaodu = -90;
				}

			}

			time = setInterval(run, 100)
		}

	</script>
</head>
<body>
	<div class="box">
		<div class="father" id='father'>
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
	</div>
</body>
</html>